Sync Vue Nodes Right Click menu with full ContextMenu #6455
+1,222
−89
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 11/15/2025, 12:58:50 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 11/15/2025, 01:10:37 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 2.98 MB (baseline 2.98 MB) • 🔴 +28 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 827 kB (baseline 803 kB) • 🔴 +23.7 kBGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 8.03 kB (baseline 8.03 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 307 kB (baseline 307 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 210 kB (baseline 210 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 12.6 kB (baseline 12.6 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 5.87 kB (baseline 5.87 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 5.32 MB (baseline 5.32 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.92 MB (baseline 3.92 MB) • ⚪ 0 BBundles that do not match a named category
Status: 15 added / 15 removed |
- Add disabled property to MenuOption and SubMenuOption interfaces - Apply semantic token styling for disabled items (text-node-icon-disabled) - Prevent interactions on disabled menu and submenu items - Use cursor-not-allowed and pointer-events-none for disabled state - Pass through disabled flag from LiteGraph menu items to Vue components
Add translation key for the Extensions section label in the context menu. This allows the Extensions category header to be properly localized.
Add support for non-clickable category labels in the context menu. Category items are displayed as uppercase labels with secondary text color and proper translation support via contextMenu namespace. This enables grouping menu items under section headers like "Extensions".
Add comprehensive menu ordering system to ensure consistent context menu layout: - Define MENU_ORDER constant with 5 logical sections - Implement automatic section-based divider insertion - Separate core items from extension items - Add blacklist for unwanted duplicate items (Colors, Shapes, Title, Mode, etc.) - Preserve Vue hardcoded options over LiteGraph items during deduplication - Add source tracking (litegraph vs vue) for precedence handling Menu structure: 1. Basic operations (Rename, Copy, Duplicate) 2. Node actions (Run Branch, Pin, Bypass, Mute) 3. Structure operations (Convert to Subgraph, Frame selection, Minimize Node) 4. Node properties (Node Info, Color) 5. Node-specific operations (Image operations) 6. Extensions section (non-core items) 7. Delete (always at bottom) The system ensures proper ordering regardless of whether items come from LiteGraph or Vue hardcoded menus, with Extensions clearly separated.
Reorder menu sections to follow the specification: 1. Basic operations: Rename, Copy, Duplicate 2. Node actions: Run Branch, Pin, Bypass, Mute (for groups) 3. Structure operations: Convert to Subgraph, Frame selection, Minimize Node 4. Node properties: Node Info, Color (Shape removed) 5. Node-specific operations: Image operations only Changes: - Add explicit dividers after each section - Remove Shape, Alignment, and Adjust Size options - Merge LiteGraph and Vue options for single node selection - Add source tracking (vue) for precedence during deduplication - Add comprehensive logging for debugging menu construction For single node selection, both LiteGraph and Vue options are merged with Vue options taking precedence, then structured via buildStructuredMenu.
Add real-time search filtering to the node context menu: - Search input with icon at the top of the menu - Case-insensitive filtering by menu item label - Auto-focus on menu open - Clear search on Escape key or menu close - Smart divider handling (removes unnecessary dividers during search) - Hides Extensions category label when searching The search provides instant feedback as users type, making it easier to find specific menu items in long context menus.
Move Resize and Clone menu items from fallback section to Section 3 (Structure operations) so they appear alongside Convert to Subgraph, Frame selection, and Minimize Node. Updated section boundaries: - Section 3 now spans indices 9-15 (was 9-13) - Section 4 now spans indices 16-17 (was 14-15) This ensures Resize and Clone appear under the same divider group as other structure-related operations.
When right-clicking near the bottom of the viewport, the context menu now docks to the bottom edge instead of floating off-screen, ensuring it remains accessible and scrollable.
Myestery
requested review from
a team,
KarryCharon,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
the
size:XXL
DrJKL
force-pushed
the
right-click-vue-node-contextmenu
branch
from
3d05c49 to
8e7026d
Compare
DrJKL
reviewed
Nov 12, 2025
| import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions' | ||
| import { calculateMenuPosition } from '@/composables/graph/useViewportAwareMenuPositioning' | ||
| // import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions' |
Contributor
There was a problem hiding this comment.
Suggested change
| // import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions' |
DrJKL
reviewed
Nov 12, 2025
Comment on lines
+121
to
+148
| if (option.type === 'category') { | ||
| continue | ||
| } |
Contributor
There was a problem hiding this comment.
Question: What happens if we have dividers adjacent to categories (not sure what order)?
DrJKL
reviewed
Nov 12, 2025
Comment on lines
+196
to
+222
| overlayEl.style.position = style.position | ||
| overlayEl.style.left = style.left | ||
| overlayEl.style.transform = style.transform |
Contributor
There was a problem hiding this comment.
Doing multiple style assignments can be a source of repaints
https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg
DrJKL
reviewed
Nov 12, 2025
Comment on lines
+108
to
+110
| overlayEl.style.position = 'fixed' | ||
| overlayEl.style.bottom = '0px' | ||
| overlayEl.style.top = '' |
Contributor
There was a problem hiding this comment.
Same here, plus the queries above for a few different dimensions
https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg
DrJKL
reviewed
Nov 12, 2025
| } | ||
| const repositionSubmenu = () => { | ||
| const overlayEl = (popover.value as any)?.$el as HTMLElement |
Contributor
There was a problem hiding this comment.
Replaces simple substring matching with Fuse.js fuzzy search for better user experience. Adds 300ms debouncing to reduce processing overhead. Includes debug logging for troubleshooting.
Myestery
force-pushed
the
right-click-vue-node-contextmenu
branch
from
8e7026d to
52b7b5c
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces several improvements to the node context menu in the graph selection toolbox, focusing on enhanced usability, accessibility, and maintainability. The most significant changes are the addition of a search/filter feature for menu options, improved handling and display of disabled and categorized menu items, and better viewport-aware positioning for popovers and submenus.
Menu Usability & Filtering:
NodeOptions.vue,useMoreOptionsMenu.ts) [1] [2] [3] [4] [5]Menu Item Display & Accessibility:
MenuOptionItem.vue,SubmenuPopover.vue,useMoreOptionsMenu.ts) [1] [2] [3] [4] [5]categoryanddisabledflags, and added asourcefield for distinguishing between hardcoded and dynamic options. (useMoreOptionsMenu.ts) [1] [2]Popover & Submenu Positioning:
NodeOptions.vue,SubmenuPopover.vue) [1] [2]Codebase Maintenance:
NodeOptions.vue,useMoreOptionsMenu.ts) [1] [2] [3] [4]These changes collectively enhance the user experience for interacting with node options, making the menu more navigable, accessible, and robust.
Recording.2025-11-11.235411.mp4